<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze UI Admin index Examples</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <link rel="stylesheet" href="assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="assets/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="assets/css/app.css">
    <script src="assets/js/jquery.min.js"></script>
    <style type="text/css">
        #eye{
          position: relative;
          top:-30px;
          right:10px;
          float: right;
        }
    </style>
</head>

<body data-type="login">
    <script src="assets/js/theme.js"></script>
    <div class="am-g tpl-g">
        <!-- 风格切换 -->
        <div class="tpl-skiner">
            <div class="tpl-skiner-toggle am-icon-cog">
            </div>
            <div class="tpl-skiner-content">
                <div class="tpl-skiner-content-title">
                    选择主题
                </div>
                <div class="tpl-skiner-content-bar">
                    <span class="skiner-color skiner-white" data-color="theme-white"></span>
                    <span class="skiner-color skiner-black" data-color="theme-black"></span>
                </div>
            </div>
        </div>
        <div class="tpl-login" style="margin-top:-100px;">
            <!-- 注册》》输入电话号码验证 -->
            <div class="tpl-login-content" id="checkphone_div">
                <div class="tpl-login-logo">
                </div>

                <form class="am-form tpl-form-line-form">

                    <div class="am-form-group">
                        <input type="text" class="tpl-form-input" id="phonenum" placeholder="请输入电话号码">
                    </div>

                    <div class="am-form-group">
                        <input type="password" class="tpl-form-input" id="pwd" placeholder="请输入密码">
                        <i id="eye" class="am-icon-eye"></i>
                    </div>

                    <div class="am-form-group">
                        <input type="text" class="tpl-form-input" id="phone_check" placeholder="请输入手机验证码">
                    </div>

                    <div class="am-form-group tpl-login-remember-me">
                        <button type="button" class="am-btn am-btn-warning" id="get_phone_check">点击获取验证码</button>                       
                    </div>

                    <div class="am-form-group">
                        <button type="button" class="am-btn am-btn-secondary am-btn-block" id="check_phone">下一步</button>
                    </div>

                </form>
            </div>

            <!-- 注册》》补充信息 -->
            <div class="tpl-login-content" id="signup_div" style="display:none;" >
                
                <form class="am-form tpl-form-line-form">

                    <div class="am-form-group">
                        <input type="text" class="tpl-form-input" id="user_name" placeholder="姓名">
                    </div>

                    <div class="am-form-group">
                        <input type="number" class="tpl-form-input" id="user_age" placeholder="年龄" onkeyup="this.value=this.value.replace(/\D/g,'')" onblur="this.value=this.value.replace(/\D/g,'')" >
                    </div>

                    <div class="am-form-group">
                        <input type="text" class="tpl-form-input" id="user_address" placeholder="地址" />
                    </div>

                    <div class="am-form-group">
                        <input type="text" class="tpl-form-input" id="user_mail" placeholder="邮箱" />
                    </div>

                    <div class="am-form-group" id="user_sex">
                        <span style="color:#999999;">请选择您的性别：</span>
                        <input type="radio" class="tpl-form-input" style="margin-left:11%;" name="sex" value="man" checked="checked" /><span style="color:#999999;">男</span>
                        <input type="radio" class="tpl-form-input" style="margin-left:21%;" name="sex" value="woman" /><span style="color:#999999;">女</span>
                    </div>

                    <div class="am-form-group" id="marriage">
                        <span style="color:#999999;">请选择您的婚姻状态：</span>
                        <input type="radio" class="tpl-form-input" style="margin-left:3%;" name="marriage" value="married"  checked="checked"/><span style="color:#999999;">已婚</span>
                        <input type="radio" class="tpl-form-input" style="margin-left:3%;" name="marriage" value="unmarried" /><span style="color:#999999;">未婚</span>
                        <input type="radio" class="tpl-form-input" style="margin-left:3%;" name="marriage" value="divorce" /><span style="color:#999999;">离异</span>
                    </div>

                    <div class="am-form-group am-form-file">
                        <div class="am-u-sm-12 am-u-md-5">
                            <button type="button" class="am-btn am-btn-danger am-btn-sm">
                            <i class="am-icon-cloud-upload"></i> 请添加您的头像</button>
                            <input type="file" id="photo_up" style="background:transparent;" />
                        </div>
                        <div class="am-u-sm-12 am-u-md-4">
                            <img class="am-u-sm-12" id="user_photo" src="assets\img\user_img.jpg" alt="宝宝照片">
                        </div>
                    </div>

                    <div class="am-form-group tpl-login-remember-me">
                        <input id="checkme" type="checkbox">
                        <label for="checkme">
                        我已阅读并同意<a href="javascript:;" data-am-modal="{target: '#agreement_div', closeViaDimmer: 0}" id="agreement">《用户注册协议》</a> 
                         </label>
                    </div>

                    <div class="am-form-group">
                        <button type="button" class="am-btn am-btn-success am-btn-block" id="sigu_up">注册</button>
                    </div>

                </form>
            </div>

            <!-- 协议内容 -->
            <div class="am-modal am-modal-no-btn" tabindex="-1" id="agreement_div">
                <div class="am-modal-dialog">
                    <div class="am-modal-bd">
                        <div class="row">
                            <div class="am-u-sm-12">
                                <div class="widget am-cf">
                                    <div class="widget-head am-cf">
                                        <div class="widget-title am-fl">用户注册协议</div>
                                        <div class="widget-function am-fr">
                                            <a href="javascript: void(0)" class="am-close am-close-spin close_a" data-am-modal-close>&times;</a>
                                        </div>
                                    </div>
                                    <div class="widget-body am-fr">
                                    balabala这里是一些协议内容
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <script src="assets/js/amazeui.min.js"></script>
    <script src="assets/js/app.js"></script>
    <script>
    $(document).ready(function(e){

        $("#eye").on("click",function(){            
            if($("#eye").attr("class") == "am-icon-eye"){
                $("#eye").removeClass().addClass("am-icon-eye-slash");
                $("#pwd").attr("type","text");
            }else{
                $("#eye").removeClass().addClass("am-icon-eye");
                $("#pwd").attr("type","password");
            }
        });

        var loadImg = "";
        $("#photo_up").on("change",function(){
            var files = document.getElementById('photo_up').files;
            console.log(files);
            var windowURL = window.URL || window.webkitURL;
            loadImg = windowURL.createObjectURL(files[0]);
            document.getElementById('user_photo').setAttribute('src',loadImg);//这里应该是点击图片确定后再加载
            return loadImg;
        });

        $("#check_phone").on("click",function(){

            if($("#phonenum").val() == "" || $("#pwd").val() == "" || $("#phone_check").val() == ""){
                alert("请输入完整信息");
                return false;
            }

            //手机号码验证 （1开头，第二位为[345789]之一，长度为11位）
            var phone = $("#phonenum").val();
            if( !( /^1[345789]\d{9}$/.test(phone) ) ){
                alert("您填写的手机号码有误，请检查重填！");
                return false;
            }

            // 检查手机验证码是否正确
            var check_num = 1234;
            if($("#phone_check").val() != check_num){
                alert("您的手机验证码填写错误，请重新验证！");
                return false;
            }

            var len = $("#pwd").val().length;
            if(len<6|| len>18){
                alert("密码长度应在6-18位之间！");
                return false;
            }

            $("#checkphone_div").hide();
            $("#signup_div").show();
        });

        $("#sigu_up").on("click",function(){

            var mail = $("#user_mail").val();
            if( !( /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(mail) ) ){
                alert("您填写的邮箱有误，请检查重填！");
                return false;
            }

            if($("#user_name").val() == "" || $("#user_age").val() == ""){
                alert("请输入完整信息");
                return false;
            }

            var $isChecked = $("#checkme").is(":checked");
            if(!$isChecked){
                alert("请阅读并同意用户注册协议！");
                return false;
            }

            var sigu_up_form = {
                "phonenum":$("#phonenum").val(),
                "pwd":$("#pwd").val(),
                "phone_check":$("#phone_check").val(),
                "user_name":$("#user_name").val(),
                "user_age":$("#user_age").val(),
                "user_mail":$("#user_mail").val(),
                "user_sex":$("#user_sex input[name='sex']:checked").val(),
                "marriage":$("#marriage input[name='marriage']:checked").val(),
                "userPhoto":loadImg,
            };

            console.table(sigu_up_form);
            alert("注册成功！");
            window.location.href="sign-up-foreend.html";
        });

    });
    </script>
</body>

</html>